<!-- 弹窗组件 -->
<template>
	<el-dialog
		:title="title"
		v-model="dialogVisible"
		:width="width"
		:close-on-click-modal="false"
		:destroy-on-close="true"
		append-to-body
		@open="$emit('open')"
		@close="$emit('close')"
	>
		<!-- 内容插槽 -->
		<template #default>
			<slot name="content"></slot>
		</template>

		<!-- 自定义底部插槽 -->
		<template #footer>
			<slot name="footer"></slot>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
interface Props {
	title: string;
	modelValue: boolean;
	width?: string;
	height?: string;
}

const props = withDefaults(defineProps<Props>(), {
	width: '80%',
	height: '80%',
});

const emit = defineEmits(['update:modelValue', 'open', 'close']);

const dialogVisible = ref(false);

watch(
	() => props.modelValue,
	(val) => {
		dialogVisible.value = val;
		// val ? emit('open') : emit('close');
	}
);
</script>

<style scoped lang="scss"></style>
